<template>
  <page class="device cponymodle">
    <page-header>
      <x-header :left-options="{backText: ''}">主机型号</x-header>
      <div class="search-wrap">
        <search v-model="manufacturerModel" @input="handleInput" placeholder="请输入主机型号"></search>
      </div>
    </page-header>
    <page-content :scroll="true" @refresh="refresh" @infinite="infinite">
      <div class="host" v-for="item in list" @click="choice(item.manufacturerModel, item.id)" :key="item.id">
        <div class="host-c">
          <p>{{item.manufacturerModel}}</p>
          <i class="material-icons right">chevron_right</i>
        </div>
      </div>
    </page-content>
  </page>
</template>

<script>
import { mapGetters } from 'vuex'
import { XHeader } from 'vux'
import Search from '@components/common/Search'
import { manufacturerModel as manufacturerModelService } from '@service'

export default {
  name: 'DeviceHostModle',
  components: {
    XHeader,
    Search
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/info',
      token: 'user/token',
      filterParams: 'filter/params',
      filterNames: 'filter/showNames'
    }),
    userId () {
      return this.userInfo.id
    }
  },
  data () {
    return {
      value: '',
      manufacturerModel: '',
      list: []
    }
  },
  methods: {
    async loadModels () {
      let findType = 2
      let token = this.token
      let { deviceType, deviceName } = this.filterParams
      let manufacturerModel = this.manufacturerModel
      let userId = this.userId
      try {
        let data = await manufacturerModelService.list({
          token, userId, findType, deviceType, deviceName, manufacturerModel
        })
        this.list = data
      } catch (error) {
        console.log(error)
      }
    },
    handleInput () {
      this.loadModels()
    },
    refresh () {
      this.loadModels()
    },
    infinite () {
      this.loadModels()
    },
    choice (manufacturerModel, manufacturerModelId) {
      let tmp = { ...this.filterParams, manufacturerModelId }
      this.$store.dispatch('filter/updateFilterParams', tmp)
      this.$store.dispatch('filter/updateShowNames', {...this.filterNames, manufacturerModel})
      this.$router.go(-1)
    }
  },
  // created () {
  //   this.loadModels()
  // },
  activated () {
    this.loadModels()
  }
}
</script>
